<template>
  <div style="margin:15px;">
    <Form>
      <FormItem label="用户名">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </FormItem>
      <FormItem label="密码">
        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      </FormItem>
      <FormItem label="城市">
        <select name="city" lay-verify="required">
          <option value=""></option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </FormItem>
      <FormItem label="复选框">
        <input type="checkbox" name="like[write]" title="写作">
        <input type="checkbox" name="like[read]" title="阅读" checked>
        <input type="checkbox" name="like[dai]" title="发呆">
      </FormItem>
      <FormItem>
        <LayButton type="submit" icon="save" laySubmit filter="demo">立即提交</LayButton>
        <LayButton type="reset" className="primary" disabled>重置</LayButton>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import LayForm from '@/plugins/layui/form'
import Form from '@/components/form'
import LayButton from '@/components/button'
const FormItem = Form.Item
export default {
  name: 'form',
  components: { Form, FormItem, LayButton },
  mounted () {
    let form = LayForm
    form.render()
    form.on('submit(demo)', (data) => {
      console.log(data)
      return false
    })
  }
}
</script>
